<template>
	<base-breadcrumb>
		<template>
			<div class="table-page-search-wrapper">
				<TitleName title="施组(方案)审批计划"></TitleName>
				<a-form>
					<a-row :gutter="24">
						<a-col :md="8" :sm="8">
							<a-form-item label="所属分公司" 
							:labelCol="{ lg: { span: 6 }, sm: { span: 6 } }" 
							:wrapperCol="{ lg: { span: 16 }, sm: { span: 16 } }">
								<a-select @select="handleChange" placeholder="请选择" v-mod>
									<a-select-option value="0">是</a-select-option>
									<a-select-option value="1">否</a-select-option>
								</a-select>
							</a-form-item>
						</a-col>
						<a-col :md="8" :sm="8">
							<a-form-item label="所属项目" 
							:labelCol="{ lg: { span: 5 }, sm: { span: 5 } }" 
							:wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
								<BaseInput v-model="queryParam.projectName" />
							</a-form-item>
						</a-col>
						<a-col :md="8" :sm="8">
							<span class="table-page-search-submitButtons">
								<a-button type="primary" @click="getList">搜索</a-button>
								<a-button style="margin-left: 8px" @click="addEmpty">重置</a-button>
								<a @click="toggleAdvanced" style="margin-left: 8px">
									{{ advanced ? '收起' : '展开' }}
									<a-icon :type="advanced ? 'up' : 'down'" />
								</a>
							</span>
						</a-col>
					</a-row>
					<div v-if="advanced">
						<a-row :gutter="24">
							<a-col :md="8" :sm="8">
								<a-form-item label="名称" 
								:labelCol="{ lg: { span: 5 }, sm: { span: 5 } }" 
								:wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
									<BaseInput placeholder="" v-model="queryParam.vompletedBy" />
								</a-form-item>
							</a-col>
							<a-col :md="8" :sm="8">
								<a-form-item label="填报时间" 
								:labelCol="{ lg: { span: 5 }, sm: { span: 5 } }" 
								:wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
									<a-range-picker @change="WriteTime" />
								</a-form-item>
							</a-col>
							<a-col :md="8" :sm="6">
								<a-form-item label="填报人" 
								:labelCol="{ lg: { span: 6 }, sm: { span: 4 } }" 
								:wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
									<BaseInput placeholder="" v-model="queryParam.vompletedBy" />
								</a-form-item>
							</a-col>
							<a-col :md="8" :sm="8">
								<a-form-item label="审批状态" 
								:labelCol="{ lg: { span: 5 }, sm: { span: 5 } }" 
								:wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
									<a-select placeholder="请选择" @select="handleChange1">
										<a-select-option value="0">是</a-select-option>
										<a-select-option value="1">否</a-select-option>
									</a-select>
								</a-form-item>
							</a-col>
						</a-row>
					</div>
				</a-form>
			</div>
		</template>
		<a-card>
			<div class="table-operator">
				<a-button @click="add1" icon="plus" type="primary">新增计划</a-button>
				<!-- <a-button @click="add" type="primary">施组(方案)审批情况</a-button> -->
			</div>
			<a-table :data-source="dataSource" :columns="columns" >
				<span slot="description" slot-scope="text">
					<ellipsis :length="8" tooltip>{{ text }}</ellipsis>
				</span>
				<span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
				<!-- 操作 -->
				<span slot="operation" slot-scope="text, record">
					<template>
						<a @click="detailed(record)">查看</a>
						<a-divider type="vertical" />
						<a @click="addEdit(record)">编辑</a>
						<a-divider type="vertical" />
						<a @click="discard(record)">删除</a>
					</template>
				</span>
			</a-table>
      <div>
        <pagination
          :total="totalSize"
          v-model="objFrom.pageNo"
          :pageSize.sync="pageSize"
          @change="onPageNo"
          @showSizeChange="onShowSizeChange"
        ></pagination>
      </div>
		</a-card>
	</base-breadcrumb>
</template>

<script>
	import TitleName from '@/components/TitleName/index.vue'
	import { getList} from '@/api/technical/approvalPlan'
	const columns = [
		{
			title: '序号',
			width: '80px',
			scopedSlots: { customRender: 'serial' }
		},
		{
			title: '名称',
			dataIndex: 'projectName'
		},
		{
			title: '所属分公司',
			dataIndex: 'timeForComplation'
		},
		{
			title: '所属项目',
			dataIndex: 'branchCompany'
		},
		{
			title: '填报人',
			dataIndex: 'vompletedBy'
		},
		{
			title: '状态',
			dataIndex: 'status'
		},
		{
			title: '填报时间',
			dataIndex: 'fillingInTime'
		},
		{
			title: '操作',
			dataIndex: 'operation',
			width: '170px',
			scopedSlots: { customRender: 'operation' }
		}
	];
	// const dataSource = [
	// 	{
	// 		projectName:1111,
	// 		timeForComplation:2222,
	// 		branchCompany:33333,
	// 		vompletedBy:44444,
	// 		status:1,
	// 		fillingInTime:5555555
	// 	}
	// ]
	export default{
		components:{
			TitleName 
		},
		data(){
			this.columns = columns
			// this.dataSource = dataSource
			return{
				advanced:false,
				queryParam:{},
				dataSource:[],
				totalSize:''
			}
		},
		created(){
			this.getList()
		},
		methods:{
			// 展开收起状态 
			toggleAdvanced(){
				this.advanced = !this.advanced
			},
			getList(){
				getList(this.queryParam).then((res)=>{
					this.dataSource = res.data
          this.totalSize = res.totalSize
				})
			},
			handleChange1(){

			},
			handleChange(){

			},
			addEmpty(){
				this.queryParam = {}
			},
			detailed(){
				this.$router.push({
					path: '/technical/ShiGroup/ViewDetails',
					query: {
						
					}
				});
			},
			add(){
				this.$router.push({
					path: '/technical/ShiGroup/ApprovalSituation',
					query: {
						
					}
				})
			},
			add1(){
				this.$router.push({
					path: '/technical/ShiGroup/newPlan',
					query: {
						
					}
				})
			},
			addEdit(){
				this.$router.push({
					path: '/technical/ShiGroup/newPlan',
					query: {
						
					}
				})
			}
		}
	}
</script>

<style>
</style>
